<template>
 <div>
   <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
     <el-breadcrumb-item :to="{ path: '/' }">
       <i class="el-icon-s-promotion"></i>
       后台管理</el-breadcrumb-item>
     <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
     <el-divider></el-divider>
   </el-breadcrumb>


   <!--页面顶部-->
   <div style="margin-bottom: 20px">
     <el-button type="primary" size="medium"
                @click="$router.push('/sys-admin/permission/admin/add-new')">添加管理员</el-button>
   </div>

   <!--相册列表-->
   <el-table
       :data="tableData" border style="width: 100%">
     <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
     <el-table-column prop="name" label="相册名称" width="100" show-overflow-tooltip></el-table-column>
     <el-table-column prop="description" label="简介" show-overflow-tooltip></el-table-column>
     <el-table-column prop="sort" label="排序序号" width="100"></el-table-column>
     <el-table-column  label="查看图片" width="100" align="center">
       <el-button size="mini">查看</el-button>
     </el-table-column>
     <el-table-column  label="操作" width="100" align="center">
       <template slot-scope="scope">
         <el-button type="primary" size="mini" icon="el-icon-edit" circle
                    @click="openEditDialog(scope.row)"></el-button>
         <el-button type="danger" size="mini" icon="el-icon-delete" circle
                    @click="openDeleteConfirm(scope.row)"></el-button>
       </template>
     </el-table-column>
   </el-table>

    <!--   分页页码-->
   <div style="text-align: right; margin: 10px auto;">
     <el-pagination
         @current-change="changePage"
         layout="total,prev, pager, next"
         :total="total"
         :page-size="pageSize"
         :current-page="currentPage"
     >
     </el-pagination>
   </div>

    <!--    修改的弹窗-->
   <el-dialog title="修改相册" :visible.sync="dialogFormVisible">
     <el-form :model="editForm" :rules="rules" :label-width="formLabelWidth">
       <el-form-item label="相册名称" prop="name" >
         <el-input v-model="editForm.name" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="相册简介" prop="description" >
         <el-input v-model="editForm.description" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="排序序号" prop="sort">
         <el-input v-model="editForm.sort" autocomplete="off"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitEditForm">确 定</el-button>
     </div>
   </el-dialog>

 </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total:0,
      pageSize:0,
      currentPage:1,
      dialogFormVisible: false,
      editForm: {
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 4 到 15 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入简介', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入排序序号', trigger: 'blur' },
          {pattern:/^(\d{1}|[1-9]{1}[0-9]{1})$/ ,message: '排序序号必须是0-99之间的数字', trigger: 'blur' }
        ],
      },
      formLabelWidth: '120px'

    }
  },
  methods:{
    openEditDialog(album){
      let url = 'http://localhost:9180/album/standard?id='+album.id;
      console.log('url='+url);
      let localJwt = localStorage.getItem("localJwt");
      //发请求
      this.axios.create({headers:{'Authorization':localJwt}}).
      get(url).then((response)=>{
            let jsonResult = response.data;
            console.log(jsonResult);
            if(jsonResult.state == 20000){
              console.log("成功")
              this.editForm  = jsonResult.data;
              this.dialogFormVisible = true;
            }else{
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadAlbumList();
                }
                })
            }
      });


    },
    submitEditForm(){
      //此处id从查询的时候放到了editForm中
      let url='http://localhost:9180/album/update';
      console.log('url='+url);
      let formData = this.qs.stringify(this.editForm);
      console.log('forData='+formData);
      let localJwt = localStorage.getItem("localJwt");
      //发请求
      this.axios.create({headers:{'Authorization':localJwt}})
          .post(url,formData).then((response)=>{
        let jsonResult = response.data;
        console.log(jsonResult);
        if(jsonResult.state == 20000){
          this.$message({
            message:'修改相册成功！',
            type:'success'});
          this.dialogFormVisible = false;
          this.loadAlbumList();
        }else if(jsonResult.state==40400){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadAlbumList();
            }
          })
        }else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }

      });
    },
    openDeleteConfirm(album){
      this.$confirm('此操作将永久删除该【' + album.id+'-'+album.name+'】相册, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(album)
      }).catch(() => {

      });
    },
    handleDelete(album){
      let url='http://localhost:9180/album/delete';
      console.log('url='+url);
      let formData = 'Id='+album.id;
      console.log('forData='+formData)
      let localJwt = localStorage.getItem("localJwt");
      //发请求
      this.axios.create({headers:{'Authorization':localJwt}})
          .post(url,formData).then((response) => {
            let jsonResult = response.data;
            if(jsonResult.state==20000){
              this.$message({
                message: '删除相册成功',
                type: 'success'
              });
              this.loadAlbumList();
            }else if(jsonResult.state==40400){
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadAlbumList();
                }
              });
            }else if(jsonResult.state==40900){
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }

    });
    },
    changePage(value){
      this.$router.replace('?pageNum='+value);
      this.loadAlbumList();
    },
    loadAlbumList(){
      /*
      * this.$router.currentRoute.query.pageNum拿到的的是当前网址的pageNum参数
      * 当前网址：http://localhost:9100/sys-admin/product/album--->但是当前网址是没有参数的
      * 所以就会报错：url=http://localhost:9180/album/list?pageNum=undefined
      *                                                          ……………………注意此处
      * 所以在此处添加判断没有pageNum的是时候默认给1
      * */
      let pageNum = this.$router.currentRoute.query.pageNum;
      if(!pageNum){pageNum=1;}
      let url = 'http://localhost:9180/album/list?pageNum='+pageNum;
      console.log('url='+url);
      let localJwt = localStorage.getItem("localJwt");
      //发请求
      this.axios.create({headers:{'Authorization':localJwt}}).
      get(url).then((response)=>{
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.tableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize= jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadAlbumList();
  }
}
</script>

<style scoped>

</style>